<template>
    <Layout>
      <Tabs class-prefix="type" :data-source="recordTypeList" :value.sync="type"/>
      <div class="chart-wrapper" ref="chartWrapper">
        <Chart class="chart" :options="chartOptions"/>
      </div>
      <ol v-if="groupedList.length>0">
        <li v-for="(group,index) in groupedList" :key="index">
          <h3 class="title">{{beautify(group.title)}} <span>￥{{group.total}}</span></h3>
          <ol>
            <li v-for="item in group.items" :key="item.id" class="record">
              <span>{{tagString(item.tags)}}</span>
              <span class="notes">{{item.notes}}</span>
              <span>￥{{item.amount}}</span>
            </li>
          </ol>
        </li>
      </ol>
      <div v-else class="noResult">
        当前没有记录！赶快去记一笔吧~
      </div>
    </Layout>
</template>

<script lang="ts">
import Vue from 'vue'
import {Component} from 'vue-property-decorator';
import Tabs from '@/components/Tabs.vue';
import recordTypeList from '@/constants/recordTypeList';
import dayjs from 'dayjs'
import clone from '@/lib/clone';
import Chart from '@/components/Chart.vue';
import _ from 'lodash'
import day from 'dayjs'

@Component({
  components: {Tabs, Chart},
})
export default class Statistics extends Vue {
  // eslint-disable-next-line no-undef
  tagString(tags: Tag[]){
    return tags.length === 0 ? '无' : tags.map(t => t.name).join('，')
  }

  beautify(string: string){
    const day = dayjs(string)
    const now = dayjs()
    if(day.isSame(now, 'day')){
      return '今天'
    } else if(day.isSame(now.subtract(1, 'day'), 'day')){
      return '昨天'
    } else if(day.isSame(now.subtract(2, 'day'),'day')){
      return '前天'
    } else if(day.isSame(now, 'year')) {
      return day.format('M月D日')
    } else {
      return day.format('YYYY年M月D日')
    }
  }

  mounted() {
    const div = this.$refs.chartWrapper as HTMLDivElement
    div.scrollLeft = div.scrollWidth
  }

  get keyValueList() {
    const today = new Date()
    const array = []
    for(let i=0; i<=29; i++){
      const dateString = day(today).subtract(i, 'day').format('YYYY-MM-DD')
      const found = _.find(this.groupedList, {title: dateString})
      array.push({
        date: dateString,
        value: found ? found.total : 0
      })
    }
    array.sort((a,b) => {
      if(a.date > b.date){
        return 1
      }else if(a.date === b.date) {
        return 0
      }else {
        return -1
      }
    })
    return array
  }

  get chartOptions() {
    const keys = this.keyValueList.map(item => item.date)
    const values = this.keyValueList.map(item => item.value)

    return {
      grid: {
        left: 0,
        right: 0,
      },
      xAxis: {
        type: 'category',
        data: keys,
        axisTick: {alignWithLabel: true},
        axisLine: {lineStyle: {color: '#666'}},
        axisLabel: {
          formatter: function (value: string, index: number){
            return value.substr(5)
          }
        }
      },
      yAxis: {
        type: 'value',
        show: false
      },
      series: [{
        symbol: 'circle',
        symbolSize: 12,
        itemStyle: {borderWidth: 1, color: '#666', borderColor:'#666'},
        data: values,
        type: 'line'
      }],
      tooltip: {
        show: true,
        triggerOn: 'click',
        formatter: '{c}',
        position: 'top'
      }
    }
  }

  get recordList(){
    // eslint-disable-next-line no-undef
    return (this.$store.state as RootState).recordList
  }

  get groupedList(){
    const {recordList} = this;

    const newList = clone(recordList)
      .filter(r => r.type === this.type)
      .sort((a, b) => dayjs(b.createdAt).valueOf() - dayjs(a.createdAt).valueOf())
    if(newList.length === 0){return [] as Result;}

    // eslint-disable-next-line no-undef
    type Result = {title: string, total?: number, items: RecordItem[]}[]
    const result:Result = [
      {title: dayjs(newList[0].createdAt).format('YYYY-MM-DD'), items: [newList[0]]}
    ]
    for(let i=1; i<newList.length; i++){
      const current = newList[i]
      const last = result[result.length-1]
      if(dayjs(last.title).isSame(dayjs(current.createdAt), 'day')){
        last.items.push(current)
      }else{
        result.push({title: dayjs(current.createdAt).format('YYYY-MM-DD'), items: [current]})
      }
    }
    result.map(group => {
      group.total = group.items.reduce((sum, item) => sum += item.amount, 0)
    })
    return result
  }

  beforeCreate(){
    this.$store.commit('fetchRecords')
  }

  type = '-';
  recordTypeList = recordTypeList;
}
</script>

<style lang="scss" scoped>
.noResult {
  padding: 16px;
  text-align: center;
}
::v-deep {
  .type-tabs-item {
    background: white;

    &.selected {
      background: #c4c4c4;

      &::after {
        display: none;
      }
    }
  }
  .interval-tabs-item {
    height: 48px;
  }
}
%item {
  padding: 8px 16px;
  line-height: 24px;
  min-height: 40px;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.title {
  @extend %item;
}
.record {
  background: white;
  @extend %item;
}
.notes {
  margin-right: auto;
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #999;
}

.chart {
  width: 428.57%;
  &-wrapper {
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-x: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
